<template>
  <div>


            <exsearch></exsearch>
				<!-- 自定义分页 -->
				<div class="row">
					
					<div v-for="item in goodslist_self" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img :src="'http://localhost:8000/static/upload/'+item.img" class="rounded-corners img-fluid" 	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item?id='+item.id"> 名称：{{ item.name }}</a></h4>
						<p><span class="emphasis">价格：${{ item.price }}</span></p>
                        <p><span class="emphasis">描述：{{ item.desc }}</span></p>
					</div>

				</div>

				<!--自主分页容器-->
				<div>

				<a @click="get_goods_self(1)"  >首页</a>


				<Button v-show="lastpage" @click="get_goods_self(lastpage)">上一页</Button>

				&emsp;&emsp;

				&emsp;&emsp;

				<span v-for="item in last_page">
					
					<a @click="get_goods_self(item)"  >{{ item }}</a>&emsp;&emsp;

				</span>

				<a @click="get_goods_self(page)"  >{{ page }}</a>&emsp;&emsp;


				<span v-for="item in next_page">
					
					<a @click="get_goods_self(item)"  >{{ item }}</a>&emsp;&emsp;

				</span>

				<span v-if='page != allpage'>...</span>

				<Button v-show="nextpage" @click="get_goods_self(nextpage)">下一页</Button>


				<a @click="get_goods_self(allpage)"  >尾页</a>
				
				<input @input="jump_page($event)" type="text" style="width:50px;">
				</div>

				<div>

					<Button @click="get_goods_self(page,'price','')">价格正序</Button>
					<Button @click="get_goods_self(page,'price','-')">价格倒序</Button>

				</div>



		

    
  </div>
  
</template>


 
<script>

import exsearch from './exsearch'



export default {
  data () {
    return {
	  msg: "这是一个变量",

	  goodslist_self:[],

	  //自定义分页
      //商品总数
      total_self:0,
      //上一页
      lastpage:0,
      //下一页
      nextpage:0,
      //当前页
      page:1,
      //总页数
      allpage:0,
      //每页展示数
	  size:1,
	  
	  //分页偏移
      last_page:[],
	  next_page:[],
	  
	  //分页方案
	  coloum:'',
	  order:'',

    }
  },
  components:{
	  "exsearch":exsearch,

  },
  mounted:function(){

	  this.get_goods_self(1);
},
  methods:{


	  //页面跳转
	  jump_page(e){

		  var val = e.target.value;
		  if(val > this.allpage){
			  this.$Message('您输入的页码有误')
			  return false
          }
          
          if(!val){
              return false
          }

		  this.get_goods_self(val)
		

	  },


	  
    //自主分页
    get_goods_self:function(page,coloum,order){

		this.page = page

		var coloum = coloum
		var order = order

		if(coloum||order){
			this.coloum = coloum
			this.order = order
		}

	
      //发送请求
      this.axios.get('http://localhost:8000/goodslists/',{params:{page:page,size:this.size,coloum:this.coloum,order:this.order}}).then((result) =>{

        console.log(result);

        this.goodslist_self = result.data.data;

        //商品总数
        this.total_self= result.data.total;

        //判断上一页
        if(page==1){
        	this.lastpage = 0;
        }else{
        	this.lastpage = page - 1;
        }

        //计算总页数
        this.allpage = Math.ceil(this.total_self / this.size);

        //判断下一页
        if(page == this.allpage){
        		this.nextpage = 0;
        }else{
        		this.nextpage = page + 1;
		}
		

        //设置偏移量
        var move_page = 2;

        var my_last = [];

        //计算左侧偏移量
        for(let i=page-move_page;i<page;i++){

        	if(i > 0){

        	my_last.push(i);

        	}
        }

        //计算右侧偏移量

        var my_next = [];

        for(let i=page+1;i<=page+move_page;i++){

        	if(i <= this.allpage){

        	my_next.push(i);

        	}

        }

        console.log(my_last);

        console.log(my_next);

        this.last_page = my_last;
        this.next_page = my_next;



      });

    },

	  
     
  }
}


</script>
 
<style>



</style>